<template>
  <div class="tool-list">
    <el-switch
      v-model="switchvalue"
      inline-prompt
      :active-icon="MagicStick"
      :inactive-icon="Close"
      title="特效开关"
      @change="magicControl"
    />
    <img src="/images/icon/user.svg" alt="" class="user" @click="openuser" />
    <img src="/images/icon/set.svg" alt="" class="set" @click="openset" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { homepage } from "@/store/index.js";
import { MagicStick, Close } from "@element-plus/icons-vue";
// switch开关状态
let switchvalue = ref(true);
// 公共仓库
let store = homepage();
// 特效控制器
const magicControl = () => {
  if (switchvalue) {
    store.clearSakura();
  } else {
    store.Sakura();
  }
};

// 登录设置
const openuser = () => {
  store.$patch((state) => {
    state.loginshow = true;
  });
};

// 设置工具栏
const openset = () => {
  store.$patch((state) => {
    state.setshow = true;
  });
};
</script>

<style lang="scss" scoped>
.el-switch {
  --el-switch-on-color: #cdcdcd;
  --el-switch-off-color: gray;
}
.el-switch.is-checked :deep(.el-switch__core) {
  border-color: #cdcdcd;
}
.tool-list {
  display: flex;
  align-items: center;
  .user,
  .set {
    cursor: pointer;
  }
  .user {
    margin: 0 10px;
  }
  .set:hover{
    transform: rotate(90deg)
  }
}
</style>
